<template>
  <div class='page'>
    <div class='container'>
      <pub-search
        v-model:searchColumns='state.searchColumns'
        v-model:searchForm='state.searchForm'
        mask-append-to='table-container'
        @search='getPageData'
      >
        <template #leftBtn>
          <el-button
            :icon='Plus'
            class='btn-table-add'
            type='primary'
            @click='addProcess()'
          >
            新增
          </el-button>
        </template>
      </pub-search>
      <div class='table-container'>
        <pub-table
          ref='pubTable'
          :column='state.columns'
          :data='state.tableData'
          :loading='tableLoading'
        >
          <template #option='scope'>
            <el-button
              class='btn-row-add'
              plain
              type='primary'
              @click='showNode(scope.row)'
            >
              编辑节点
            </el-button>
            <el-button
              class='btn-row-add'
              plain
              type='primary'
              @click='showCondition(scope.row)'
            >
              编辑流程
            </el-button>
            <el-button
              class='btn-row-add'
              plain
              type='primary'
              @click='addProcess(scope.row)'
            >
              修改
            </el-button>
            <el-button
              class='btn-row-add'
              plain
              type='primary'
              @click='delProcess(scope.row)'
            >
              删除
            </el-button>
          </template>
        </pub-table>
      </div>
      <pub-pagination
        :total='total'
        v-model:page='state.searchForm.pageNum'
        v-model:limit='state.searchForm.pageSize'
        @pagination='getPageData'
      />
    </div>
    <pub-dialog
      v-if='nodeDialog'
      title='编辑节点'
      v-model:visible='nodeDialog'
      width='1000px'
      @close='nodeDialog = false'
    >
      <ProcessNodeList
        :process-id='processId'
      />
    </pub-dialog>
    <pub-dialog
      v-if='conditionDialog'
      title='编辑流程'
      v-model:visible='conditionDialog'
      width='1000px'
      @close='conditionDialog = false'
    >
      <ProcessConditionList
        :process-id='processId'
        @close='conditionDialog = false'
      />
    </pub-dialog>
    <pub-dialog
      v-if='processDialog'
      title='新增'
      v-model:visible='processDialog'
      width='1000px'
      @close='processDialog = false'
    >
      <ProcessAdd
        :data='state.currentRow'
        @save='saveProcess'
        @close='processDialog = false'
      />
    </pub-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import { Plus } from '@element-plus/icons-vue'
import { deleteProcess, getProcessList, insertProcess, updateProcess } from '@/api/process'
import ProcessNodeList from '@/view/system/process/components/processNodeList.vue'
import ProcessAdd from '@/view/system/process/components/processAdd.vue'
import ProcessConditionList from '@/view/system/process/components/processConditionList.vue'

const userStore = useUserStore()
const userAreaArr = userStore.userAreaArr
const orgInfo = userStore.orgInfo

const isEdit = ref(false)
const roleIds = ref('')
const editId = ref('')
const dialogFormVisible_role = ref(false)
const dialogFormVisible_add = ref(false)
const popTitle = ref('')
const tableLoading = ref(false)
const total = ref(0)
const state = reactive({
  searchColumns: [
    {
      label: '流程编码',
      el: 'Input',
      bind: 'code',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '流程名称',
      el: 'Input',
      bind: 'name',
      defaultValue: '',
      labelWidth: 50
    }
  ],
  tableData: [],
  searchForm: {
    pageSize: 15,
    pageNum: 1
  },
  currentRow: null,
  columns: [
    { label: '流程编码', prop: 'code' },
    { label: '流程名称', prop: 'name' },
    // { label: '流程状态', prop: 'status', type: 'formatDict', formatCode: 'ZDZT' },
    { label: '操作', type: 'option', fixed: 'right', width: '300px' }
  ]
})
const dialogEditRef = ref(null)
const nodeDialog = ref(false)
const processDialog = ref(false)
const conditionDialog = ref(false)
const processId = ref(null)


const addProcess = (row = {}) => {
  console.log(row)
  state.currentRow = row
  processDialog.value = true
}

const saveProcess = async (row) => {
  let res
  if (row.id) {
    res = await updateProcess(row)
  } else {
    res = await insertProcess(row)
  }
  if (res.succeed) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    processDialog.value = false
    getPageData()
  }
}
const delProcess = async (row) => {
  ElMessageBox.confirm('确认删除选择的记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    confirmButtonClass: 'btn-row-edit',
    cancelButtonClass: 'btn-row-close',
    type: 'warning'
  })
    .then(async () => {
      let res = await deleteProcess(row.id)
      if (res.succeed) {
        ElMessage({
          type: 'success',
          message: res.msg
        })
        getPageData()
      }
    })
    .catch(err => {
    })
}
const showNode = (row) => {
  processId.value = row.id
  nodeDialog.value = true
}
const showCondition = (row) => {
  processId.value = row.id
  conditionDialog.value = true
}

const fetchList = () => {
  state.searchForm.pageNum = 1
  getPageData()
}

const getPageData = async () => {
  tableLoading.value = true
  let res = await getProcessList(state.searchForm)
  if (res.succeed) {
    state.tableData = res.data
    total.value = res.total
  }
  tableLoading.value = false
}

onMounted(() => {
  getPageData()
})
</script>
<style scoped>
/* 当列表有两行筛选条件使用 */
.table-container {
    height: calc(100% - 130px);
    flex: 1;
}

.table-web {
    height: 100% !important;
}

/* 当列表有两行筛选条件使用 */
</style>
